Angular Forms
படிவங்கள் பயனர்கள் உங்கள் பயன்பாட்டில் தரவை உள்ளிடவும் திருத்தவும் அனுமதிக்கின்றன.
Forms Essentials
Two approaches: Template-driven (HTML-first with [(ngModel)]) and Reactive (code-first with FormGroup/FormControl).
When to use: Template-driven for simple forms; Reactive for complex validation, dynamic fields, and testability.
Key concepts: A FormControl tracks a single input's value/state; a FormGroup groups controls by name.
Imports: FormsModule (template-driven) and ReactiveFormsModule (reactive).
Jassif Team Notes:
Data Binding for [(ngModel)] and property binding, Events for handling input, and Templates for interpolation பற்றி காண்க.
Template-driven-க்கு FormsModule மற்றும் reactive-க்கு ReactiveFormsModule இறக்குமதி செய்யவும்.
Template-driven Forms
தொடங்க விரைவானது மற்றும் plain HTML போல் உணர்கிறது.
[(ngModel)] மற்றும் தனித்த name attributes உடன் bind செய்யவும்.
ஏற்றுமதி செய்யப்பட்ட ngForm (எ.கா., valid, touched) மூலம் ஒட்டுமொத்த நிலையை அணுகவும்.
Standalone கூறுகளில் FormsModule-ஐ இறக்குமதி செய்யவும்.
Template-driven Form Example
<form #f="ngForm" (ngSubmit)="onSubmit()">
<input name="name" [(ngModel)]="name" required minlength="3" #c="ngModel">
<div *ngIf="c.invalid && (c.dirty || c.touched)">Invalid</div>
<button [disabled]="f.invalid">Submit</button>
</form>Complete Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<h3>Forms</h3>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<label>
Name:
<input name="name" [(ngModel)]="name" placeholder="Enter your name">
</label>
<button type="submit">Submit</button>
</form>
<p>Value: {{ name }}</p>
<p *ngIf="submitted">Submitted!</p>
`
})
export class App {
name = '';
submitted = false;
onSubmit() { this.submitted = true; }
}
bootstrapApplication(App);Example Explained:
[(ngModel)]="name": உள்ளீட்டை name புலத்திற்கு இரண்டு-வழி bind செய்கிறது.
#f="ngForm": படிவ நிலையை ஏற்றுமதி செய்கிறது (எ.கா., f.valid, f.invalid).
(ngSubmit)="onSubmit()": கூறு முறையைப் பயன்படுத்தி submit-ஐ கையாளுகிறது.
Display: {{ name }} தற்போதைய மதிப்பைக் காட்டுகிறது; ஒரு கொடி சமர்ப்பிக்கப்பட்ட நிலையைக் காட்டுகிறது.
Important Notes:
Unique name required: ngForm உடன் பதிவு செய்ய ஒவ்வொரு கட்டுப்பாட்டிற்கும் தனித்த name தேவை.
Module imports: Template-driven படிவங்களுக்கு FormsModule தேவை (standalone கூறுகளுக்கு, அதை imports-இல் சேர்க்கவும்).
HTML Form Elements in Angular
Form Elements Examples
<input name="email" type="email" [(ngModel)]="model.email">
<textarea name="bio" [(ngModel)]="model.bio"></textarea>
<label><input type="checkbox" name="agree" [(ngModel)]="model.agree"> Agree</label>
<label><input type="radio" name="color" [value]="'red'" [(ngModel)]="model.color"> Red</label>
<label><input type="radio" name="color" [value]="'blue'" [(ngModel)]="model.color"> Blue</label>
<select name="pet" [(ngModel)]="model.pet">
<option [ngValue]="{ id: 1, name: 'Cat' }">Cat</option>
<option [ngValue]="{ id: 2, name: 'Dog' }">Dog</option>
</select>
<input type="file" (change)="onFiles($event)">Form Elements Tips:
Object options: <select>-இல் object விருப்பங்களுக்கு, value-க்கு பதிலாக [ngValue] பயன்படுத்தவும்.
Radio with non-string values: எண்கள் அல்லது objects போன்ற string அல்லாத மதிப்புகளை radios-க்கு bind செய்ய [ngValue] பயன்படுத்தவும்.
Select multiple: multiple சேர்க்கவும் மற்றும் ஒரு வரிசைக்கு bind செய்யவும்; string அல்லாதவற்றுக்கு [ngValue] பயன்படுத்தவும்.
Number inputs: Template-driven மதிப்புகளை strings-ஆக bind செய்கிறது; உங்களுக்கு எண்கள் தேவைப்பட்டால் குறியீட்டில் மாற்றவும்.
File input: (change) கையாளியுடன் கோப்புகளைப் படிக்கவும்; கோப்பு objects-ஐ இரண்டு-வழி bind செய்யாதீர்கள்.
compareWith for select: விருப்பங்கள் மறு-உருவாக்கப்படக்கூடிய objects-களாக இருக்கும்போது [compareWith] பயன்படுத்தவும்.
Validation
required, minlength, மற்றும் email போன்ற விதிகளைச் சேர்க்கவும்.
கட்டுப்பாடு அசுத்தமாகவோ அல்லது தொட்டதாகவோ இருக்கும்போது அல்லது சமர்ப்பித்த பிறகு பிழைகளைக் காட்டவும்.
படிவம் தவறானதாக இருக்கும்போது submit-ஐ முடக்கவும்.
Validation Example
<input name="email" [(ngModel)]="email" email required #e="ngModel">
<div *ngIf="e.invalid && (e.dirty || e.touched)">
<small *ngIf="e.errors && e.errors['required']">Required</small>
<small *ngIf="e.errors && e.errors['email']">Invalid email</small>
</div>Complete Validation Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<h3>Forms Validation</h3>
<form #f="ngForm" (ngSubmit)="onSubmit()" novalidate>
<label>
Name:
<input name="name" [(ngModel)]="model.name" required minlength="3" #name="ngModel">
</label>
<div *ngIf="name.invalid && (name.dirty || name.touched || submitted)" style="color:crimson">
<small *ngIf="name.errors && name.errors['required']">Name is required.</small>
<small *ngIf="name.errors && name.errors['minlength']">Name must be at least 3 characters.</small>
</div>
<label>
Email:
<input name="email" [(ngModel)]="model.email" email required #email="ngModel">
</label>
<div *ngIf="email.invalid && (email.dirty || email.touched || submitted)" style="color:crimson">
<small *ngIf="email.errors && email.errors['required']">Email is required.</small>
<small *lgIf="email.errors && email.errors['email']">Email must be valid.</small>
</div>
<button type="submit" [disabled]="f.invalid">Submit</button>
</form>
<p *ngIf="submitted">Submitted: {{ model | json }}</p>
`
})
export class App {
model = { name: '', email: '' };
submitted = false;
onSubmit() { this.submitted = true; }
}
bootstrapApplication(App);Validation Explained:
#name="ngModel": name உள்ளீட்டிற்கான கட்டுப்பாட்டு நிலையை ஏற்றுமதி செய்கிறது.
Errors: name.errors['required'] மற்றும் name.errors['minlength'] குறிப்பிட்ட செய்திகளை இயக்குகின்றன.
When to show: செய்திகள் கட்டுப்பாடு தவறாகவும் அசுத்தமாக || தொட்டதாக || சமர்ப்பிக்கப்பட்டதாக இருந்தால் தோன்றும்.
Disable submit: பொத்தான் தவறான சமர்ப்பிப்பைத் தடுக்க f.invalid க்கு bind செய்கிறது.
Validation Best Practices:
When to show errors: செய்திகளை அசுத்தமாக || தொட்டதாக || சமர்ப்பிக்கப்பட்டதாக இருக்கும்போது மட்டும் காட்டவும், அதிக முன்கூட்டியே தோன்றாதபடி.
Disable submit correctly: f.invalid (டெம்ப்ளேட்) அல்லது form.invalid (reactive) க்கு bind செய்யவும்.
Reactive Forms
குறியீட்டில் FormGroup/FormControl-ன் மரத்தை உருவாக்கவும்.
டெம்ப்ளேட்டை [formGroup] மற்றும் formControlName உடன் bind செய்யவும்.
சிக்கலான சரிபார்ப்பு, நிபந்தனை புலங்கள் மற்றும் சோதனைக்கு சிறந்தது.
FormBuilder மற்றும் Validators-உடன் கட்டுப்பாடுகளை உருவாக்கவும்.
Reactive Form Setup
form = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
});
<form [formGroup]="form">
<input formControlName="name">
<input formControlName="email">
</form>Complete Reactive Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
template: `
<h3>Reactive Forms</h3>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<label>
Name
<input formControlName="name" placeholder="Your name">
</label>
<div *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched || submitted)" style="color:crimson">
<small *ngIf="form.controls.name.errors && form.controls.name.errors['required']">Name is required.</small>
<small *ngIf="form.controls.name.errors && form.controls.name.errors['minlength']">Min 3 characters.</small>
</div>
<label>
Email
<input formControlName="email" placeholder="you@example.com">
</label>
<div *ngIf="form.controls.email.invalid && (form.controls.email.dirty || form.controls.email.touched || submitted)" style="color:crimson">
<small *ngIf="form.controls.email.errors && form.controls.email.errors['required']">Email is required.</small>
<small *ngIf="form.controls.email.errors && form.controls.email.errors['email']">Email must be valid.</small>
</div>
<label>
<input type="checkbox" formControlName="newsletter">
Subscribe to newsletter
</label>
<button type="submit" [disabled]="form.invalid">Submit</button>
</form>
<p>Status: {{ form.status }}</p>
<p>Value: {{ form.value | json }}</p>
<p *ngIf="submitted" style="color: seagreen;">Submitted!</p>
`
})
export class App {
fb = new FormBuilder();
submitted = false;
form = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
newsletter: [false],
});
onSubmit() { this.submitted = true; }
}
bootstrapApplication(App);Reactive Forms Explained:
[formGroup]="form": படிவ உறுப்பை FormGroup நிகழ்வுக்கு bind செய்கிறது.
formControlName: பெயரிடப்பட்ட கட்டுப்பாடுகளுக்கு உள்ளீடுகளை இணைக்கிறது (name, email, newsletter).
Validators: FormBuilder மற்றும் Validators-உடன் உருவாக்கப்பட்டது; பிழை செய்திகள் கட்டுப்பாடு பிழைகளைப் படிக்கின்றன.
Submit: form.invalid ஆக இருக்கும்போது பொத்தானை முடக்குகிறது; submit-இல் ஒரு சமர்ப்பிக்கப்பட்ட கொடியை அமைக்கிறது.
Reactive Forms Warnings:
Don't mix paradigms: formControlName-ஐயும் பயன்படுத்தும் கட்டுப்பாடுகளில் [(ngModel)]-ஐத் தவிர்க்கவும்.
Update via API: கட்டுப்பாட்டு objects-ஐ நேரடியாக மாற்றுவதற்குப் பதிலாக setValue/patchValue மற்றும் validator முறைகளைப் பயன்படுத்தவும்.
Module imports: Reactive படிவங்களுக்கு ReactiveFormsModule தேவை.
Forms Approaches Comparison
| Aspect | Template-driven Forms | Reactive Forms |
|---|---|---|
| Setup | HTML-first, quick start | Code-first, explicit |
| Complexity | Simple forms | Complex forms, dynamic fields |
| Validation | HTML attributes | Programmatic, synchronous/async |
| Testability | Harder to unit test | Easier to unit test |
| Data Model | Two-way binding | Immutable data model |
| Performance | Good for simple forms | Better for complex scenarios |